import 'package:favorcate/core/model/meal_model.dart';
import 'package:favorcate/ui/shared/size_fit.dart';
import 'package:flutter/material.dart';

class JKMealDetailContent extends StatelessWidget {

  final JKHomeMealModel _meal;

  JKMealDetailContent(this._meal);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          buildTopImage(),
          buildMakeTitle(context, '制作材料'),
          buildMakeMaterial(context),
          buildMakeTitle(context, '制作步骤'),
          buildMakeSteps(context),
          SizedBox(height: 20,),
        ],
      ),
    );
  }

  // 1、顶部的图片
  Widget buildTopImage() {
    return Container(
      // 在父Widget里面尽可能的大
      width: double.infinity,
      child: Image.network(_meal.imageUrl)
    );
  }
  // 2.制作的材料
  Widget buildMakeMaterial(BuildContext context) {
    return buildMakeContent(
      context: context,
      child: ListView.builder(
          padding: EdgeInsets.zero,
          // 范围内包裹
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemCount: _meal.ingredients.length,
          itemBuilder: (ctx, index) {
            return Card(
              color: Colors.amber,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: Text(_meal.ingredients[index], style: Theme.of(context).textTheme.headline3,),
              ),
            );
          }
      ),
    );
  }

  // 3.制作的步骤
  Widget buildMakeSteps(BuildContext context) {
    return buildMakeContent(
      context: context,
      // 带有分割线的方式
      child: ListView.separated(
        padding: EdgeInsets.zero,
        // 范围内包裹
        shrinkWrap: true,
        // 禁止ListView滚动
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (ctx, index) {
          return ListTile(
            leading: CircleAvatar(
              child: Text('#${index + 1}'),
              backgroundColor: Colors.pink,
            ),
            title: Text(_meal.steps[index]),
          );
        },
        separatorBuilder: (ctx, index) {
          return Divider();
        },
        itemCount: _meal.steps.length
      )
    );
  }

  // 4.制作标题
  Widget buildMakeTitle(BuildContext context, String title) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 8.px),
      child: Text(title, style: Theme.of(context).textTheme.headline3,),
    );
  }

  Widget buildMakeContent({BuildContext context, Widget child}) {
    return Container(
      padding: EdgeInsets.all(8.px),
      width: MediaQuery.of(context).size.width- 30.px,
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(8.px)
      ),
      child: child
    );
  }
}
